<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 移动设备做优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <!--<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <link href="css/home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="home_nav_top">
    <nav class="nav navbar-default navbar-fixed-top">
        <div class="container" align="center">
            <ul class="nav nav-tabs nav-tabs-justified">
                <div class="row">
                    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2" align="right"></div>
                    <div class="col-lg-10 col-md-10 col-sm-8 col-xs-8" align="center">
                        <li><b><span class="glyphicon glyphicon-fire"></span> Web Store </b></li>
                    </div>
                    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2" id="about_box">
                        <li>
                            <div class="dropdown">
                            <a class="btn btn-danger dropdown-toggle" type="button" id="about" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-option-vertical"></span>
                                <!--下拉菜单-->
                                <!--<span class="caret"></span>-->
                            </a>
                            <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" class="btn"><h3><span class="glyphicon glyphicon-fire"></span> Web Store</h3></a></li>
                                <li class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" class="btn"><h4>登录/注册</h4></a></li>
                                <li class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" class="btn"><h4>设置</h4></a></li>
                                <li class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" class="btn"><h4>关于web store</h4></a></li>
                                <li class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" class="btn"><h4>退出</h4></a></li>
                            </ul>
                        </div>
                        </li>
                    </div>
                </div>
            </ul>
        </div>
    </nav>
</div>
<div class="home_content">
    <div class="container">
        <div class="row" align="center">
            <!--<div class=" col-lg-12 col-xs-12 col-md-12 col-sm-12">-->
            <!--<img class="img-radius" src="https://img.alicdn.com/bao/uploaded/i1/TB1xJ4CJFXXXXbHXXXXXXXXXXXX_!!0-item_pic.jpg_300x300q90.jpg">-->
            <!--</div>-->
            <div id="myCarousel" class="carousel slide col-lg-8 col-md-8 col-sm-10 col-xs-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-0">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/beats.jpg" alt="beats earphone">
                    </div>
                    <div class="item">
                        <img src="img/aliens.jpg" alt="aliens laptop">
                    </div>
                    <div class="item">
                        <img src="https://img.alicdn.com/bao/uploaded/i1/TB1xJ4CJFXXXXbHXXXXXXXXXXXX_!!0-item_pic.jpg_300x300q90.jpg" alt="bootstrap">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev">&lsaquo;
                </a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next">&rsaquo;
                </a>
            </div>
        </div>
        <div class="home_function">
            <div class="row">
                <div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-3 col-lg-2 col-lg-offset-2">
                    <a href="#">
                        <span class="glyphicon glyphicon-time center-block blue"></span>
                        <h5>秒杀</h5>
                    </a>
                    <!--<img class="img-responsive img-circle" src="img/shop.png">-->
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="#">
                        <span class="glyphicon ch-text center-block red">聚</span>
                        <h5>聚划算</h5>
                    </a>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="#">
                        <span class="glyphicon glyphicon-cutlery center-block yellow"></span>
                        <h5>外卖</h5>
                    </a>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="">
                        <span class="glyphicon center-block ch-text orange">拍</span>
                        <h5>拍卖</h5>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-3 col-lg-2 col-lg-offset-2">
                    <a href="#">
                        <span class="glyphicon glyphicon-usd center-block pink"></span>
                        <h5>领金币</h5>
                    </a>
                    <!--<img class="img-responsive img-circle" src="img/shop.png">-->
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="#">
                        <span class="glyphicon glyphicon-film center-block purple"></span>
                        <h5>电影</h5>
                    </a>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="#">
                        <span class="glyphicon center-block ch-text green">充</span>
                        <h5>充值中心</h5>
                    </a>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-3 col-lg-2">
                    <a href="#">
                        <span class="glyphicon glyphicon-plane center-block darkblue"></span>
                        <h5>出行</h5>
                    </a>
                </div>

            </div>
        </div>
        <div class="home_search">
            <form class="form-horizontal" action="#">
                <div class="form-group">
                    <input class="input-lg col-lg-4 col-lg-offset-3 col-md-4 col-md-offset-1 col-sm-8 col-xs-8 col-xs-offset-1" type="text" placeholder="请输入要搜索的商品">
                    <button type="submit" class="btn btn-danger input-lg col-lg-2 col-md-2 col-sm-2 col-xs-2"><span class="glyphicon glyphicon-search"></span> 搜 索</button>
                </div>
            </form>
        </div>
        <div class="home_goods">
            <div class="row" id="home_goods_title">
                <h4><span class="glyphicon glyphicon-tag"></span> 超实惠</h4>
            </div>
            <div class="row home_list" id="computer">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 blue">
                    <h3>电</h3><h3>脑</h3><h3>办</h3><h3>公</h3>
                </div>
                <div class="col-sm-5 col-xs-5">
                    <a href="#">
                        <h4 id="computer_tag"><span class="glyphicon glyphicon-time"></span>大减价</h4>
                        <img class="img-responsive" src="img/machrevo.jpg">
                    </a>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/asus.jpg">
                        </a>
                    </div>
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/udisk.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div class="row home_list" id="food">
                <div class="col-sm-5 col-xs-5">
                    <a href="#">
                        <h4  id="food_tag"><span class="glyphicon glyphicon-time"></span>限时购</h4>
                        <img class="img-responsive" src="img/noodle.jpg">
                    </a>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/tea.jpg">
                        </a>
                    </div>
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/milk.jpg">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-xs-offset-1 col-sm-offset-1 yellow">
                    <h3>零</h3><h3>食</h3><h3>饮</h3><h3>料</h3>
                </div>
            </div>
            <div class="row home_list" id="audio">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 purple">
                    <h3>影</h3><h3>音</h3><h3>娱</h3><h3>乐</h3>
                </div>
                <div class="col-sm-5 col-xs-5">
                    <a href="#">
                        <h4 id="audio_tag"><span class="glyphicon glyphicon-time"></span>手慢无</h4>
                        <img class="img-responsive" src="img/earphone.jpg">
                    </a>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/VR.jpg">
                        </a>
                    </div>
                    <div class="row">
                        <a href="#">
                            <img class="img-responsive" src="img/player.jpg">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="home_nav_bottom">
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container" align="center">
            <ul class="nav nav-tabs nav-tabs-justified">
                <div class="row" align="center">
                    <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" align="center"><li><a href="#"><span class="glyphicon glyphicon-home"></span><span>首页</span></a></li></div>
                    <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" align="center"><li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span><span>分类</span></a></li></div>
                    <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" align="center"><li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span><span>购物车</span></a></li></div>
                    <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" align="center"><li><a href="#"><span class="glyphicon glyphicon-user"></span><span>我的</span></a></li></div>
                </div>
            </ul>
        </div>
    </nav>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>

<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="./bootstrap.min.js"> </script>-->

<script src="script/home.js"></script>
</body>
</html>